<script lang="ts" setup>
import debounce from "@/utils/debounce";
// import { useRedPackStore } from "@/store/redpack";

interface ChatItemProps {
  redpack?: string;
  isRecive?: boolean;
  amount?: number;
  index?: number;
}
// const { updateCount } = useRedPackStore();

const props = defineProps<ChatItemProps>();
const emit = defineEmits(["click"]);

const onRecive = debounce(() => {
  if (props.isRecive) {
    // updateCount(props.amount as number);
    uni.navigateTo({ url: "/pages/money/money" });
    return;
  }
  emit("click");
});
</script>
<template>
  <view :class="['bubble', { recive: isRecive }]" @click="onRecive"> </view>
</template>
<style lang="scss" scoped>
@keyframes load {
  100% {
    transform: translateY(-5px);
  }
}
.bubble {
  position: relative;
  box-sizing: border-box;
  width: 260px;
  height: 94px;
  background-image: url("https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/red.png");
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 40rpx;
  &.recive {
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      top: 0;
      left: 0;
      background-color: rgba($color: #ffffff, $alpha: 0.5);
      border-radius: 10px;
    }
    &::before {
      content: "已领取";
      position: absolute;
      z-index: 1;
      bottom: 6px;
      right: 20px;
      color: rgba($color: #ffffff, $alpha: 0.6);
      font-size: 12px;
    }
  }
}
</style>
